<template>
  <div class="border-top-background">
    <div class="gcxm-wrap">
      <div class="title_wrap grid-item">
        <div class="title">
          <span>工程项目</span>
          <year20andyear19 class="yearOrMonth" :year="isyear20" />
        </div>
        <!-- 四个项目数组件 -->
        <div class="wrap-top-radius">
          <TopRadius :jzydata="jzy_zjgcxms" />
          <TopRadius :jzydata="jzy_zjzmj" />
          <TopRadius :jzydata="jzy_fjxms" />
          <TopRadius :jzydata="jzy_szxms" />
        </div>
      </div>
    </div>
    <div>
      <div class="title_wrap grid-item">
        <div class="title">
          <span>建筑业企业及人员</span>
          <!-- <year20andyear19 class="yearOrMonth" :year="isyear20" /> -->
        </div>
        <div class="wrap-top-jzyqyjry">
          <!-- 企业总数 -->
          <div class="wrap-qiyezongshu">
            <div class="wrap-qiyezongshu-top"></div>
            <div class="wrap-qiyezongshu-right"></div>
            <div class="wrap-qiyezongshu-bottom"></div>
            <div class="wrap-qiyezongshu-left"></div>
            <img src="../../assets/building/top/top-qyzs.png" class="qizs-img" alt />
            <div class="qiyezongshu-number">
              <countTo :startVal="0" :endVal="jzy_jzyqyzs" separator :duration="2000"></countTo>
            </div>
            <div class="qiyezongshu-miaoshi">企业总数(家)</div>
          </div>
          <!-- 统计图表 -->
          <div class="wrap-top-qyfb">
            <div class="wrap-qyfb-miaoshu">
              <span>勘察企业</span>
              <span>设计企业</span>
              <span>施工企业</span>
              <span>图审机构</span>
            </div>
            <!-- 条柱 -->
            <div class="wrap-qyfb-tongji">
              <div class="qyfb-tongjitiao">
                <div class="from_zps_2">
                  <div class="from_zps_2_1" :style="'width:'+(jzy_kcsj/jzy_jzyqyzs)*100+'%'"></div>
                </div>
              </div>

              <div class="qyfb-tongjitiao">
                <div class="from_zps_2">
                  <div class="from_zps_2_1" :style="'width:'+(jzy_sgqy/jzy_jzyqyzs)*100+'%'"></div>
                </div>
              </div>

              <div class="qyfb-tongjitiao">
                <div class="from_zps_2">
                  <div class="from_zps_2_1" :style="'width:'+(jzy_tsjg/jzy_jzyqyzs)*100+'%'"></div>
                </div>
              </div>

              <div class="qyfb-tongjitiao">
                <div class="from_zps_2">
                  <div class="from_zps_2_1" :style="'width:'+(jzy_jlqy/jzy_jzyqyzs)*100+'%'"></div>
                </div>
              </div>
            </div>
            <div class="wrap-qyfb-shuzi">
              <div class="qyfb-shuzi">
                <countTo :startVal="0" :endVal="jzy_kcsj" separator :duration="2000"></countTo>
              </div>
              <div class="qyfb-shuzi">
                <countTo :startVal="0" :endVal="jzy_sgqy" separator :duration="2000"></countTo>
              </div>
              <div class="qyfb-shuzi">
                <countTo :startVal="0" :endVal="jzy_tsjg" separator :duration="2000"></countTo>
              </div>
              <div class="qyfb-shuzi">
                <countTo :startVal="0" :endVal="jzy_jlqy" separator :duration="2000"></countTo>
              </div>
            </div>
            <div class="wrap-qyfb-danwei">
              <div class="danwei-jia">家</div>
              <div class="danwei-jia">家</div>
              <div class="danwei-jia">家</div>
              <div class="danwei-jia">家</div>
            </div>
          </div>
          <!-- 中线 -->
          <div class="top-right-zhongxian"></div>
          <div class="wrap-top-qyry">
            <!-- 职称人员（人） -->
            <div class="bg-style">
              <span class="number-person" :style="{display: 'inline-block', marginRight:'1rem'}">
                <countTo :startVal="0" :endVal="jzy_jzycyry_rs" separator :duration="2000"></countTo>
              </span>
              <span
                class="qyry-tongbi"
                style="color: #FF4965;"
                v-if="jzy_jzycyry_tb >= 0"
              >↑{{jzy_jzycyry_tb}}%</span>
              <span class="qyry-tongbi" style="color: #44C787;" v-else>↓ {{-jzy_jzycyry_tb}}%</span>
              <span class="text-person">职称人员（人）</span>
            </div>
            <div class="topright-hengxian"></div>
            <!-- 现场管理人员（人） -->
            <div class="bg-style">
              <span class="number-person">
                <countTo :startVal="0" :endVal="jzy_zcry_rs" separator :duration="2000"></countTo>
              </span>
              <br />
              <span class="text-person">现场管理人员（人）</span>
            </div>
            <div class="topright-hengxian"></div>
            <!-- 农民工（人） -->
            <div class="bg-style">
              <span class="number-person">
                <countTo :startVal="0" :endVal="jzy_xcry_rs" separator :duration="2000"></countTo>
              </span>
              <br />
              <span class="text-person">农民工（人）</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopRadius from "./components/TopRadius";
import year20andyear19 from "../../components/homePage/year20andyear19";
export default {
  name: "topRight",
  components: {
    TopRadius,
    year20andyear19
  },
  data() {
    return {
      //是否显示2020年
      isyear20: true,
      url: "http://10.10.208.6:2020/home/serv",
      //企业总数
      jzy_jzyqyzs: 0,
      jzy_kcsj: 0, //勘察设计(家)
      jzy_sgqy: 0, // 施工企业(家)
      jzy_tsjg: 0, //图审机构(家)
      jzy_jlqy: 0, // 监理企业(家)
      jzy_jzycyry_rs: 0, //	建筑业从业人员(人)
      jzy_jzycyry_tb: 0, //	建筑业从业人员同比
      jzy_zcry_rs: 0, //	注册人员(人)
      jzy_xcry_rs: 0, //	现场人员(人)
      //在建工程项目数(个)
      jzy_zjgcxms: {
        number: 0,
        miaoshu: "在建工程项目数(个)"
      },
      //总建筑面积(万m²)
      jzy_zjzmj: {
        number: 0,
        miaoshu: "总建筑面积(万m²)"
      },
      //房建项目数(个)
      jzy_fjxms: {
        number: 0,
        miaoshu: "房建项目数(个)"
      },
      //市政项目数(个)
      jzy_szxms: {
        number: 0,
        miaoshu: "市政项目数(个)"
      }
    };
  },
  created() {
    this.get_jzy_gcxm();
    this.get_jzy_jzyqyjry();
  },
  methods: {
    get_jzy_gcxm() {
      let _this = this;
      let params = { path: "ov", groupid: 3 };
      _this.http.post(_this.url, params).then(res => {
        let v = res.data;
        _this.jzy_zjgcxms.number = v.jzy_zjgcxms;
        _this.jzy_zjzmj.number = v.jzy_zjzmj / 10000;
        _this.jzy_fjxms.number = v.jzy_fjxms;
        _this.jzy_szxms.number = v.jzy_szxms;
        //         jzy_fjxms: 560
        // jzy_szxms: 15
        // jzy_zjgcxms: 2371
        // jzy_zjzmj: 1828032136.14
      });
    },
    get_jzy_jzyqyjry() {
      let _this = this;
      let params = { path: "ov", groupid: 2 };
      _this.http.post(_this.url, params).then(res => {
        let v = res.data;
        _this.jzy_jzyqyzs = v.jzy_jzyqyzs;
        _this.jzy_kcsj = v.jzy_kcsj;
        _this.jzy_sgqy = v.jzy_sgqy;
        _this.jzy_tsjg = v.jzy_tsjg;
        _this.jzy_jlqy = v.jzy_jlqy;
        _this.jzy_jzycyry_rs = v.jzy_jzycyry_rs;
        _this.jzy_jzycyry_tb = v.jzy_jzycyry_tb;
        _this.jzy_zcry_rs = v.jzy_zcry_rs;
        _this.jzy_xcry_rs = v.jzy_xcry_rs;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/building/topRight.scss";
</style>

